<template>
  <div class="category">
    分类
    <!-- 展示全局的状态数据 count -->
    <p>store中的count: {{ count }}--{{ num }}</p>
    <p>store中的getters:{{ doubleCount }}</p>
    <p>
      <button @click="addCount">同步count+1</button>
      <button @click="addCountStep(10)">同步count+10</button>
      <button @click="addCountAsync">异步count+1</button>
      <button @click="addCountAsyncStep(10)">异步count+10</button>
    </p>
  </div>
</template>
<script>
// 使用辅助函数操作store 
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
  name: 'category',
  data() {
    return {

    }
  },
  computed: {
    ...mapState(['count', 'num']),
    // count() {
    //   return this.$store.state.count
    // },
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapMutations(['addCount', 'addCountStep']),
    ...mapActions(['addCountAsync', 'addCountAsyncStep'])
    // addCount() {

    // }
  },
  mounted() {
    console.log(this);
  }
}
</script>
<style scoped>
.category {
  width: 100%;
  height: 100%;
  background-color: green;
}
</style>
